<template>
  <div class="Rating-gray">
      <i v-for="(item,index) in itemClasses" :key="index" class="fa" :class="item"></i>
  </div>
</template>
<script>
//长度
const LENGTH = 5;
//全星
const CLS_ON = "fa-star";
//半星
const CLS_HALF = "fa-star-half-empty";
//补全
const CLS_OFF = "fa-star-o";
export default {
  name: "rating",
  prop: {
    rating: Number
  },
  computed: {
      //逻辑，先向下取整乘以0.5获得 全星或者全星加半星，如果得到的值除以1不等于0，就知道他有半星
    itemClasses() {
      let result = [];
      //对分数先进行处理,向下取整*0.5
      //例如4.8 Math.floor(4.8*2)/2=4.5
      let score = Math.floor(this.rating * 2) / 2;
      //如果获取的是整星，除以1等于0，否则不等于0，用来判断是否有半星
      //半星
      let hasDecimal = score % 1 != 0;
      // 全星
      let integer = Math.floor(score);

      // 全星放入到数组中
      for (let i = 0; i < integer; i++) {
        result.push(CLS_ON);
      }
      if (hasDecimal) {
        result.push(CLS_HALF);
      }

      // 补齐
      while (result.length < LENGTH) {
        result.push(CLS_OFF);
      }

      return result;
    }
  }
};
</script>

<style>
.Rating-gray {
  margin-right: 1.066667vw;
  color: #ffbe00;
  display: inline-block;
}
</style>
